<template>
	<view class="h-full text-white">
		<view id="headerHeight">
			<lz-navbar :title="$t('bibi.home')"></lz-navbar>
			<lz-bibi-head @select="selectFn" title="USDC/USDT"></lz-bibi-head>
		</view>
		<view v-if="headerHeight">
			<scroll-view style="width: 100%;" :style="{height:headerHeight}" scroll-y="true" refresher-enabled="true" :refresher-threshold="100" :refresher-triggered="refresher.triggered"
			refresher-background="#0d0d0d" @refresherrefresh="onRefresh">
				<view class="flex w-full pb-4" style="border-bottom: 1px solid #49495F;">
					<!-- 左边 -->
					<view class="p-4 flex flex-col gap-2" style="width: 375rpx;">
						<view class="flex w-full justify-between">
							<view class="relative" style="width: 47%;"  @click="type='买入'">
								<view class="tixing1 text-center" :class="type=='买入'?'bg-green':'bg-garp'"></view>
								<view class="absolute w-full left-0 top-0 flex items-center justify-center h-full" :style="{color:type=='买入'?'#fff':'#9FA6B5' }">
									{{$t('bibi.mairu')}}
								</view>
							</view>
							<view class="relative" style="width: 47%;" @click="type='卖出'">
								<view class="tixing2 text-center" :class="type=='卖出'?'bg-red':'bg-garp'" ></view>
								<view class="absolute w-full left-0 top-0 flex items-center justify-center h-full" :style="{color:type=='卖出'?'#fff':'#9FA6B5' }">
									{{$t('bibi.maichu')}}
								</view>
							</view>
						</view>
						<view class="py-2">
							<uni-data-select v-model="select.value" :localdata="select.range" @change="changeselect" :clear="false"></uni-data-select>
						</view>
						<!-- 市价 -->
						<view v-if="select.value==0" class="border rounded-md py-2 flex justify-center items-center w-full" style="height: 80rpx;border-color: #3d3d4b;color: grey;">
							{{$t('bibi.zzjscjgcj')}}
						</view>
						<view class="border p-4 flex rounded-md items-center" style="border-color: #3d3d4b;color: grey;">
							<u--input :placeholder="type=='买入'?$t('bibi.zongjia'):$t('bibi.shuliang')" border="none" color="#fff"
							    v-model="select.input"
							></u--input>
							<view class="text-white font-bold">{{type=='买入'?'USDT':'BTC'}}</view>
						</view>
						<view class="w-full relative">
							<u-slider v-model="select.slider" step="25" min="0" max="100" blockSize="12" activeColor="#fff" inactiveColor="#2b2b2b"></u-slider>
							<view class="flex justify-between w-full absolute left-0" style="top: 4px;color: #909399;width: 104%;">
								<view class="yuan relative" @click="select.slider=0">
									<view class="absolute top-16 -left-10 text-xs" style="transform: scale(0.8);">0%</view>
								</view>
								<view class="yuan relative" @click="select.slider=25">
									<view class="absolute top-16 -left-10 text-xs" style="transform: scale(0.8);">25%</view>
								</view>
								<view class="yuan relative" @click="select.slider=50">
									<view class="absolute top-16 -left-10 text-xs" style="transform: scale(0.8);">50%</view>
								</view>
								<view class="yuan relative" @click="select.slider=75">
									<view class="absolute top-16 -left-10 text-xs" style="transform: scale(0.8);">75%</view>
								</view>
								<view class="yuan relative" @click="select.slider=100">
									<view class="absolute top-16 -left-10 text-xs" style="transform: scale(0.8);">100%</view>
								</view>
							</view>
						</view>
						<view class="border p-2 px-4 mt-4 flex rounded-md items-center" style="border-color: #3d3d4b;color: grey;">
							<u--input placeholder="0" border="none" color="#fff"
							    v-model="select.input2"
							></u--input>
							<view class="text-white text-sm font-bold" style="transform: scale(0.8);">{{type=='买入'?'USDT':'BTC'}}</view>
						</view>
						<view class="mt-4 text-white flex justify-between items-center w-full">
							<view class="flex text-xs gap-2" style="transform: scale(0.9);">
								<view style="color:#9FA6B5">{{$t('bibi.kekai')}}</view>
								<view>0{{type=='买入'?'USDT':'BTC'}}</view>
							</view>
							<navigator url="/pages/template/transfer/transfer">
							<view class="iconfont icon-qiehuan" style="color: #3269eb;"></view>
							</navigator>
						</view>
						<view class="text-white flex justify-between items-center w-full">
							<view class="flex text-xs gap-2" style="transform: scale(0.9);">
								<view style="color:#9FA6B5">{{$t('bibi.kemai')}}</view>
								<view>{{select.input}}</view>
							</view>
						</view>
						<view v-if="type=='买入'">
							<u-button :text="$t('bibi.mairu')+'BTC'" shape="circle" color="#25a74f"></u-button>
						</view>
						<view v-if="type=='卖出'">
							<u-button :text="$t('bibi.maichu')+'BTC'" shape="circle" color="#ca3f66"></u-button>
						</view>
						
					</view>
					<!-- 右边 -->
					<view class="flex-1" style="width: 375rpx;">
						<view class="flex justify-between pr-1" style="color:#9FA6B5;">
							<view style="transform: scale(0.7);">
								<view>{{$t('bibi.jiage')}}</view>
								<view>(USDT)</view>
							</view>
							<view style="transform: scale(0.7);">
								<view>{{$t('bibi.shuliang')}}</view>
								<view>(BTC)</view>
							</view>
						</view>
						<view class="px-2">
							<view class="item-warp" v-for="(item,index) in redList" :key="index">
								<view class="text-rad">{{item.num}}</view>
								<view>{{item.foder}}</view>
								<view class="item-bg" :style="{width: item.baifen}"></view>
							</view>
						</view>
						<view class="p-2 font-bold text-base" style="border-bottom: 1px solid #49495F; border-top: 1px solid #49495F;color: #2c7543;">
							102755.99
						</view>
						<view class="px-2">
							<view class="item-warp" v-for="(item,index) in greedList" :key="index">
								<view class="text-greed">{{item.num}}</view>
								<view>{{item.foder}}</view>
								<view class="item-bg-greed" :style="{width: item.baifen}"></view>
							</view>
						</view>
					</view>
				</view>
				<!-- 当前委托 -->
				<view class="p-4 text-white">
					<view class="flex justify-between items-center">
						<view class="text-base">{{$t('bibi.dangqianweituo')}}</view>
						<view class="flex" style="color: #9FA6B5;">
							<u-icon name="order" color="#9FA6B5" size="18"></u-icon>
							{{$t('bibi.quanbu')}}
						</view>
					</view>
					<view class="p-8">
						<u-empty :text="$t('bibi.zanwushuju')" icon="/static/images/sys/zwsj.png"></u-empty>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 弹出层 -->
		<lz-popup ref="lzpopup" :title="$t('bibi.home')+$t('bibi.jiaoyi')"></lz-popup>
		
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['userInfo', 'api', 'config']),
		},
		data() {
			return {
				headerHeight:'',
				//买入还是卖出
				type:'买入', 
				// 下拉刷新
				refresher:{
					_freshing:false,
					triggered:false
				},
				// 下拉选择
				select:{
					value:0,
					range: [
						{ value: 0, text: this.$t('bibi.shijia') },
						{ value: 1, text: this.$t('bibi.xianjia') }
					],
					input:'',
					slider:0,
					input2:'',
				},
				redList:[
					{num:103782.00,baifen:'80%',foder:0.22},
					{num:103782.00,baifen:'20%',foder:0.22},
					{num:103782.00,baifen:'70%',foder:0.22},
					{num:103782.00,baifen:'90%',foder:0.22},
					{num:103782.00,baifen:'20%',foder:0.22},
					{num:103782.00,baifen:'100%',foder:0.22},
					{num:103782.00,baifen:'50%',foder:0.22},
					{num:103782.00,baifen:'30%',foder:0.22},
				],
				greedList:[
					{num:103782.00,baifen:'80%',foder:0.22},
					{num:103782.00,baifen:'20%',foder:0.22},
					{num:103782.00,baifen:'70%',foder:0.22},
					{num:103782.00,baifen:'90%',foder:0.22},
					{num:103782.00,baifen:'20%',foder:0.22},
					{num:103782.00,baifen:'100%',foder:0.22},
					{num:103782.00,baifen:'50%',foder:0.22},
					{num:103782.00,baifen:'30%',foder:0.22},
				]
			}
		},
		onLoad(op) {
			console.log('6666',op);
			if(op.type){
				this.type = op.type
			}
			
			
		},
		onReady() {
			const query = uni.createSelectorQuery().in(this);
			query.select("#headerHeight").boundingClientRect((data) => {
			    console.log("得到布局位置信息" + JSON.stringify(data),this.$u.sys());
				this.headerHeight = this.$u.sys().windowHeight - data.height +'px'
				console.log(this.headerHeight);
			}).exec();
		},
		methods: {
			// 点击选择
			selectFn(){
				this.$refs.lzpopup.show()
			},
			//下拉刷新
			onRefresh(){
				if (this.refresher._freshing) return;  
				this.refresher._freshing = true;  
				if (!this.refresher.triggered)//界面下拉触发，triggered可能不是true，要设为true  
				this.refresher.triggered = true;  
				setTimeout(() => {
					this.refresher.triggered = false;
					this.refresher._freshing = false;
				},1000)
			},
			// 切换选择
			changeselect(){
				
			}
		}
	}
</script>

<style lang="scss">
	.item-warp{
		width: 100%;display: flex;justify-content: space-between;height: 24px;position: relative;
		.text-rad{
			color: #89334d;font-size: 14px;
		}
		.text-greed{
			color: #2c7543;font-size: 14px;
		}
		.item-bg{
			position: absolute;right: 0;top: 0;transition: width .3s;background: rgba(234, 49, 49, .1);height: 100%;
		}
		.item-bg-greed{
			position: absolute;right: 0;top: 0;transition: width .3s;background: rgba(96,192,140,.1);height: 100%;
		}
	}
	.yuan{
		width: 12px;height: 12px;border-radius: 100%;background-color: #1d1d27;
	}
	.tixing1{
		width: 100%;
		height: 30px;
		border-radius: 17px 0 0 20px;
		transform: perspective(10px) scale(1.1, 1.2) rotateX(-3deg);
		transform-origin: top left;
		box-shadow: inset -2px -3px 6px -4px #000;
	}
	.tixing2{
		width: 100%;
		height: 30px;
		border-radius: 0 20px 20px 0;
		transform: perspective(16px) scale(1.1, 1.2) rotateX(5deg);
		transform-origin: bottom right;
		box-shadow: inset -2px -3px 6px -4px #000;
		
	}
	.bg-garp{
		background-color: #484859;
	}
</style>